import * as echarts from "echarts";

let pieColors = ['#05cff7', '#1978e5', '#eab966', '#60b45e', '#becdd0', '#ea6666', '#ff3bba', '#b166ea']
let richColor = {}
pieColors.forEach((item, idx) => {
    richColor[`color${idx}`] = {
        fontSize: 12,
        color: item
    }
})
export const initRevenueCharts = (dom, data) => {
    let RevenueCharts = echarts.init(dom);
    let option = {
        color: pieColors,
        legend: {
            // type: 'scroll', // 'scroll'：可滚动翻页的图例。当图例数量较多时可以使用。
            // pageIconColor: '#288be3',
            // pageTextStyle: {
            //     color: '#ffffff'
            // },
            orient: 'vertical', // horizontal 横向  vertical  竖向
            // right: '5%',
            left:"55%",
            top: 'middle',
            icon: 'rect',
            itemWidth: 8,
            itemHeight: 8,
            height:150,
            // itemGap: 40,
            formatter: (name) => {
                let rate = ''
                let idx = 0
                data.some((item, index) => {
                    if (item.name === name) {
                        idx = index
                        rate = item.proportion + '%'
                        return true
                    }
                })
                name = name.slice(0,4)
                return `{name|${name}} {color${idx}|${rate}}`
            },
            textStyle: {
                color: 'rgba(212,237,253,0.6)',
                rich: {...richColor, name:{width:50}}
            }
        },
        graphic: {
            elements: [
                {
                    type: 'circle',
                    shape: {
                        "r": 46    //半径大小
                    },
                    style: {
                        "fill": new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                            {
                                offset: 1,
                                color: 'rgba(50,171,241, 0)',
                            },
                            {
                                offset: 0.5,
                                color: 'rgba(50,171,241, .2)',
                            },
                            {
                                offset: 0,
                                color: 'rgba(55,70,130, 0)',
                            },
                        ]),  // 填充颜色
                    },
                    left: '21.5%',
                    top: 'center',
                },
            ],
        },
        series: [
            {
                "name": "运行状态",
                "type": "pie",
                "startAngle": 90,
                "radius": [
                    "58%",
                    "73%"
                ],
                center: [
                    "30%",
                    "50%"
                ],
                labelLine: {
                    show: false,
                    length2: 30,
                    length: 10,
                    minTurnAngle: 90
                },
                label: {
                    show: false,
                    position: 'center',

                },
                emphasis: {
                    label: {
                        show: true,
                        formatter: (params) => {
                            return `{color${params.dataIndex}|${params.data.name} \n\n ${params.data.value}万元}`
                        },
                        rich: richColor
                    }
                },
                "data": data
            }
        ]
    }
    RevenueCharts.setOption(option)
    return RevenueCharts
}
